<template>
  <div class="order_pay">
    <div class="header">
      <div @click="goback">
        <div class="icon">
          <van-icon name="arrow-left"></van-icon>
        </div>
      </div>
      <p>确定订单</p>
    </div>
    <div class="address_info">
      <!--自取-->
      <div v-if="addrId === '0'">
        <div class="address_icon">
          <van-icon name="location-o"></van-icon>
        </div>
        <div class="addr_info">
          <div class="own">
            <span>{{receiveName}}</span>
          </div>
        </div>
        <div @click="goAddress" class="edit_addr">
          <van-icon name="edit"></van-icon>
        </div>
        <div class="address_amount">
          <span style="font-size: 12px;">￥</span><span>{{expressFee}}</span>
        </div>
      </div>
      <!--快递-->
      <div v-else>
        <div class="address_icon">
          <van-icon name="location-o"></van-icon>
        </div>
        <div class="addr_info">
          <div>
            <span>{{receiveName}},</span>
            <span>{{receivePhone}}</span>
          </div>
          <span>{{address}}</span>
        </div>
        <div @click="goAddress" class="edit_addr">
          <van-icon name="edit"></van-icon>
        </div>
        <div class="address_amount">
          <span style="font-size: 12px;">￥</span><span>{{expressFee}}</span>
        </div>
      </div>
    </div>
    <!--    订单商品列表信息-->
    <div class="order_list" v-for="(val, k) in order" :key="k">
      <div class="order_item">
        <div class="icon">
          <van-image
            round
            width="2rem"
            height="2rem"
            :src="shopImg"></van-image>
        </div>
        <div class="shop_name">
          <p>{{val.shopName}}</p>
        </div>
      </div>
      <ul v-for="(item) in val.goods" :key="item.detailId" style="border-bottom-style: inset;">
        <li>
          <van-swipe-cell>
            <van-card
              :title="item.goodsName"
              :desc="item.clothTitle"
              :num="item.clothNumber"
              :price="formatPrice(item.money)"
              :thumb="IMG_SERVICE_ADDR + item.goodsUrl"></van-card>
          </van-swipe-cell>
        </li>
      </ul>
    </div>
    <van-submit-bar
      :price="amount"
      button-text="提交订单"
      @submit="onSubmit"></van-submit-bar>
  </div>
</template>

<script>
import https from '@/common/https.js'
import {IMG_SERVICE_ADDR} from '@/config/configConstant.js' // 常量参数
import commonjs from '@/common/commonUtils.js'
import shopImg from '@/assets/img/shop.png'
import { mapMutations,mapGetters } from "vuex";
import * as types from "../../store/mutation-types";

export default {
  name: 'orderPay',
  data () {
    return {
      shopImg: shopImg,
      IMG_SERVICE_ADDR: IMG_SERVICE_ADDR,
      addrId: '0', // 取货地址id
      receiveName: '店铺自取',
      receivePhone: '',
      address: '',
      expressFee: '0.00', //运费
      totalAmount: 0, //订单总价格
      amount: 0, // 需支付总价格 订单总价+运费
      order: [
      //   {
      //   shopName: '天猫旗舰店',
      //   goods: [{
      //     detailId: '0',
      //     goodsName: '进口香蕉',
      //     clothTitle: '约250g，2根',
      //     money: 200,
      //     clothNumber: 1,
      //     goodsUrl: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
      //   }, {
      //     detailId: '1',
      //     goodsName: '陕西蜜梨',
      //     clothTitle: '约600g',
      //     money: 690,
      //     clothNumber: 1,
      //     goodsUrl: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
      //   }]
      // }, {
      //   shopName: '京东自营店',
      //   goods: [{
      //     detailId: '2',
      //     goodsName: '美国伽力果',
      //     clothTitle: '约680g/3个',
      //     money: 2680,
      //     clothNumber: 1,
      //     goodsUrl: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
      //   }]
      // }
      ]
    }
  },
  activated () {
    console.log("-------------orderPay activated-----"+ this.userAddress +"---------")
    this.addrId = this.userAddress
    // this.addrId = 1
    if (this.userAddress === '0'){
      this.receiveName = "店铺自取"
      let fee = Number.parseInt(this.expressFee)
      if (fee !== 0) {
        this.expressFee = '0.00'
        this.amount = this.totalAmount
      }
    } else {
      this.getAddressInfo()
    }
  },
  created() {
    console.log("-------------orderPay created--------------")
    this.setUserAddress('0') //初始化地址选择 状态
    let orderId = this.$route.query.orderId
    let order = orderId.split(',')
    this.getOrderInfo(order)
  },
  computed: {
    ...mapGetters(["userAddress"])
  },
  methods: {
    ...mapMutations({
      setUserAddress : types.SET_USERADDRESS,
    }),
    // 金额格式化
    formatPrice (price) {
      return price.toFixed(2)
    },
    // 返回
    goback () {
      this.$router.go(-1)
    },
    goAddress () {
      this.$router.push({path:"/address",query:{addrId: this.addrId}})
    },
    // 提交结算
    onSubmit () {
      this.$toast('点击结算')
    },
    // 获取订单详情信息
    getOrderInfo(orderId){
      let params = {orderIds: orderId}
      https.fetchPost('/order/webs/getOrderInfo', params).then((res) => {
        if (res.status === 200) {
          this.order = res.data.order
          let fee = Number.parseInt(res.data.amount) * 100
          this.totalAmount = fee
          this.amount = fee
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取地址详情信息
    getAddressInfo () {
      let params = {addrId: this.addrId}
      https.fetchPost('/address/webs/findAddressInfo', params).then((res) => {
        if (res.status === 200) {
          let addr = res.data.address
          let fee = res.data.fee
          this.expressFee = this.formatPrice(Number.parseInt(fee))
          this.amount = this.totalAmount + Number.parseInt(fee) * 100
          this.receiveName = addr.receiveName
          this.receivePhone = addr.receivePhone
          this.address = addr.receiveAddr + addr.detailAddr
        }
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.order_pay{
  .address_info{
    height: 3rem;
    overflow: hidden;
    width: 100%;
    .address_icon {
      float: left;
      margin-left: 10px;
      line-height: 3rem;
    }
    .addr_info{
      font-size:.7rem;
      position: absolute;
      text-align: left;
      max-width: 65%;
      margin-left: 30px;
      .own{
        font-size: 16px;
        line-height: 3rem;
        position: relative;
        top: -0.2rem;
        padding-left: 15px;
      }
    }
    .edit_addr{
      float: right;
      margin-right: 10px;
      line-height: 3rem;
    }
    .address_amount{
      line-height: 3rem;
      float: right;
      font-size: 14px;
      padding-right: 15px;
      position: relative;
      top: -0.2rem;
    }

  }
  .order_list{
    margin-top: 1rem;
    .order_item{
      height:2rem;
      line-height:2rem;
      overflow: hidden;
      width: 100%;
      .shop_name{
        text-align: left;
        font-size: .9rem;
        position: relative;
        top: -1rem;
        float: left;
        left: .2rem;
      }
    }
  }
  .icon{
    /* width: 10%; */
    float: left;
    margin-left: 10px;
  }
}





</style>
